<template>
  <div>
    <a-button type="primary" style="margin-bottom: 5px" @click="addData"
      >新增</a-button
    >
    <div class="tableContent" ref="tableContainerRef">
      <a-table
        :dataSource="tableData"
        :columns="columns"
        size="small"
        :scroll="tableScroll"
        :pagination="false"
        :loading="tableLoading"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'edit'">
            <a-button type="link" @click="handleEdit(record)">编辑</a-button>
          </template>
          <template v-if="column.dataIndex === 'delete'">
            <a-popconfirm
              title="确定删除该记录吗？"
              @confirm="handleDelete(record)"
              ok-text="确定"
              cancel-text="取消"
            >
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>

    <AddTimeSlotConfig
      :addTimeSlotConfigVisible="modalVisible"
      :isEdit="isEdit"
      :rowData="rowData"
      @update:addTimeSlotConfigVisible="modalVisible = $event"
      @success="handleSuccess"
    />
  </div>
</template>

<script setup>
// 
import { FormOutlined, PlusOutlined } from "@ant-design/icons-vue"
import { Empty } from 'ant-design-vue'
import useTableScroll from "@/hooks/useTableScroll"
import { cloneDeep } from "lodash-es"
import AddTimeSlotConfig from "./AddTimeSlotConfig.vue"

const $api = inject("$api")
const props = defineProps({
  nowTab: {
    type: Number,
    default: null,
  },
})
const nowTab = ref(null)
watch(
  () => props.nowTab,
  (val) => {
    if (val) {
      nowTab.value = val
    }
  },
  {
    immediate: true,
  }
)

const tableContainerRef = ref(null)
const tableData = ref([])
const tableLoading = ref(false)
const getTableData = async () => {
  tableLoading.value = true
  let params = {
    configType: nowTab.value,
  }
  let res = await $api.faultConfigList(params)
  if (res && res.code === 0) {
    tableData.value = res.data
  }
  tableLoading.value = false
}

const { tableScroll } = useTableScroll(tableData, tableContainerRef, 100)
onMounted(async () => {
  getTableData()
})

const modalVisible = ref(false)

const columns = ref([
  {
    title: "省份",
    dataIndex: "provName",
    key: "provName",
    align: "center",
    width: "25%",
  },
  {
    title: "平充时段",
    dataIndex: "flatTime",
    key: "flatTime",
    align: "center",
    width: "50%",
  },

  {
    title: "操作",
    children: [
      {
        title: "",
        dataIndex: "edit",
        key: "edit",
        align: "center",
        width: "12.5%",
        customHeaderCell: () => ({ style: { padding: 0 } }),
      },
      {
        title: "",
        dataIndex: "delete",
        key: "delete",
        align: "center",
        width: "12.5%",
        customHeaderCell: () => ({ style: { padding: 0 } }),
      },
    ],
  },
])
/* const customHeaderCell = (column) => {
  console.log(222, column)
  if (column.key === "delete" || column.key === "edit") {
    return {
      style: { padding: 0 }, // 自定义样式
    }
  }
  return {} // 返回空对象表示使用默认样式
} */
const addData = () => {
  isEdit.value = false
  modalVisible.value = true
}

const handleSuccess = async (data) => {
  if (Array.isArray(data.flatTime)) {
    data.flatTime = data.flatTime.join(", ")
  }
  console.log(data)

  let res = isEdit.value
    ? await $api.faultConfig({ configType: nowTab.value, ...data })
    : await $api.faultConfigPost({ configType: nowTab.value, ...data })
  if (res && res.code === 0) {
    getTableData()
    message.success("操作成功")
  }
}
const isEdit = ref(false)
const rowData = ref({})
const handleEdit = (record) => {
  isEdit.value = true
  rowData.value = record
  modalVisible.value = true
}

const handleDelete = async (record) => {
  // 实现删除功能
  let res = await $api.faultConfigDel({ id: record.id })
  if (res && res.code === 0) {
    getTableData()
    message.success("操作成功")
  }
}
</script>
<style></style>
